<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="css/register.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="css/base.css" />
<script src="js/register.js" type="module"></script>
<script type="text/javascript"></script>
<script>
    function init(){
        document.querySelector("#userName").addEventListener("blur",()=>{
            let xhr=new XMLHttpRequest();
            let url="user.servlet?param=checkName&userName="+document.getElementById("userName").value;
            xhr.responseType="json";
            xhr.open("GET",url,true);
            xhr.addEventListener("readystatechange",()=>{
                if(xhr.readyState==4&xhr.status==200){
                    let json=xhr.response;
                    if(json.result=="ok"){
                        console.log(json.name);
                    }
                }
            },false);
            xhr.send(null);
        },false);
    }
    window.addEventListener("load",init,false);
    
    </script>
</head>
<body>
	<section>
		<aside class="img_box"></aside>
		<h1 style="text-align: center; margin-top: 30px;">用户注册</h1>
		<fieldset>
			<legend hidden>用户注册</legend>
			<form action="user.servlet?param=upuser" method="POST">
				<table>
					<tr>
						<td><label for="userName">用户名：</label></td>
						<td><input type="text" name="userName" id="userName"></td>
						<td>
							<nav class="error_block">
								<div class="user_error_img"></div>
								<div class="user_error_msg"></div>
							</nav>
						</td>
					</tr>
					<tr>
						<td><label for="Name">昵称：</label></td>
						<td><input type="text" name="Name" id="Name"></td>
						<td>
							<nav class="error_block">
								<div class="name_error_img"></div>
								<div class="name_error_msg"></div>
							</nav>
						</td>
					</tr>
					<tr>
						<td><label for="password">密码：</label></td>
						<td><input type="password" name="password" id="password"></td>
						<td>
							<nav class="error_block">
								<div class="password_error_img"></div>
								<div class="password_error_msg"></div>
							</nav>
						</td>
					</tr>
					<tr>
						<td><label for="password01">再输入一次</label></td>
						<td><input type="password" nmae="password01" id="password01"></td>
						<td>
							<nav class="error_block">
								<div class="password01_error_img"></div>
								<div class="password01_error_msg"></div>
							</nav>
						</td>
					</tr>
					<tr>
						<td><label for="email">Email:</label></td>
						<td><input type="text" name="email" id="email"></td>
						<td>
							<nav class="error_block">
								<div class="email_error_img"></div>
								<div class="email_error_msg"></div>
							</nav>
						</td>
					</tr>
					<tr>
						<td><label for="phone">手机号：</label></td>
						<td><input type="text" name="phone" id="phone"></td>
						<td>
							<nav class="error_block">
								<div class="phone_error_img"></div>
								<div class="phone_error_msg"></div>
							</nav>
						</td>
					</tr>
					<tr>
						<td>性别：</td>
						<td colspan="2" class="wz"><input type="radio" name="sex"
							value="1" id="man"> <label for="man">男</label>&nbsp; <input
							type="radio" name="sex" value="0" id="woman"> <label
							for="woman">女</label></td>

					</tr>
					<tr>
						<td>爱好：</td>
						<td colspan="2" class="wz">
							<table>
								<tr>
									<c:forEach items="${requestScope.hobby}" var="hobby"
										varStatus="status">
										<td><input type="checkbox" name="fav" id="${hobby.code}"
											value="${hobby.code}" /> <label for="${hobby.code}">${hobby.name}</label>
										</td>
										<c:if test="${(status.index+1)%4==0}">
								</tr>
								<tr>
									</c:if>
									</c:forEach>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>住址：</td>
						<td><select id="province">
								<c:forEach items="${requestScope.natives}" var="province">
									<option value="${province.code}">${province.name}</option>
								</c:forEach>
						</select>&nbsp; <select id="city" name="city">
						</select></td>
					</tr>

					<tr>
						<td colspan="3">
							<nav id="userbutton"
								style="text-align: center; margin-top: 50px;">
								<button type="reset">重置</button>
								&nbsp;&nbsp;
								<button type="submit">注册</button>
							</nav>
						</td>
					</tr>

				</table>
			</form>
		</fieldset>
	</section>
</body>
</html>